<template>
  <!-- 待办 -->
  <div class="todo_detail">
    <div class="selectContent">
      <div>
        <van-icon name="list-switching" />
        <div style="margin: 0 3px">来源系统：</div>
        <div class="system" @click="onChangeSource">
          <span>{{ value1 }}</span> <van-icon name="arrow-down" />
        </div>
      </div>
      <div class="classify">
        <van-icon name="list-switching" />
        <div style="margin: 0 3px">待办分类：</div>
        <div class="system" @click="onChangeClassify">
          <span>{{ value2 }}</span
          ><van-icon name="arrow-down" />
        </div>
      </div>
    </div>
    <div class="searchContent">
      <div class="title">业务号码：</div>
      <van-search v-model="bsNumber" style="padding: 4px 10px 4px 0;width:100%" placeholder="请输入业务号码" />
    </div>
    <div class="searchContent2">
      <div class="title">CB流水号码：</div>
      <van-search v-model="CBOrderId" style="padding: 4px 10px 4px 0;width:100%" placeholder="请输入CB流水号码" />
    </div>
    <div class="searchContent3">
      <van-button @click="onReset" round type="default" style="width: 18%;margin-right: 10px;height: 32px">重置</van-button>
      <a-button class="btnConfirm" shape="round" type="primary"
          :loading="loadingSearch" @click="onSearch"> 查询
        </a-button>
    </div>
    <van-popup v-model="showSource" round position="bottom">
      <van-picker
        show-toolbar
        :columns="sourceList"
        value-key="label"
        @cancel="showSource = false"
        @confirm="onConfirmSource"
      />
    </van-popup>
    <van-popup v-model="showClassify" round position="bottom">
      <van-picker
        show-toolbar
        :columns="classifyList"
        value-key="label"
        @cancel="showClassify = false"
        @confirm="onConfirmClassify"
      />
    </van-popup>
    <div class="content" :style="{marginTop: '266px'}">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div
          class="item_content"
          v-for="(item, indexs) in doreadlists"
          :key="indexs"
          @click="toDetailOrder(item, indexs)"
        >
          <div class="title">
            <img src="./img/icon_title.png" alt="" />
            <div :class="isSelectIdx == indexs ? 'acitve' : ''">{{ item.orderTitle }}</div>
          </div>
          <div class="staus_content">
            <div :class="'status' + active">
              <span>当前状态：</span>
              <span>{{ item.stateName }}</span>
            </div>
            <div class="time">
              <span>更新时间：</span>
              <span>{{ item.updateDate }}</span>
            </div>
          </div>
          <div class="deatil_content">
            <div class="items">
              <div class="">
                <div class="label">
                  <van-icon name="circle" size="8" color="#2288FF" class="mr-4" /> <span>来源系统</span>
                </div>
                <div class="value">{{ item.sourceSystemName }}</div>
              </div>
            </div>
            <div class="items">
              <div class="line_item">
                <div class="line"></div>
                <div class="m0">
                  <div>
                    <div class="label">
                      <van-icon name="circle" size="8" color="#2288FF" class="mr-4" /><span>来源人</span>
                    </div>
                    <div class="value">{{ item.sourceUserName }}</div>
                  </div>
                </div>
                <div class="line"></div>
              </div>
            </div>
            <div class="items">
              <div>
                <div class="label">
                  <van-icon name="circle" size="8" color="#2288FF" class="mr-4" /> <span>待办分类</span>
                </div>
                <div class="value">{{ item.pendingTypeName }}</div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
      
      <script>
import store from '@/store/'
import { mapState } from 'vuex'
import { sourceList, classityList, doreadList } from '@/api/publicline/todoread.js'
import Vue from 'vue'

export default {
  name: 'todo',
  props: {
    active: String,
  },
  data() {
    return {
      doreadlists: [],
      sourceId: '',
      value1: '全部',
      classifyId: '',
      value2: '全部',
      sourceList: [],
      classifyList: [],
      selectType: '0',
      showSource: false,
      showClassify: false,
      loading: false,
      finished: false,
      pageNum: 1,
      pageSize: 10,
      gridCode: null,
      bsNumber:undefined,
      CBOrderId:undefined,
      loadingSearch: false
      // isActive:null
    }
  },
  computed: {
    ...mapState({
      // 后台菜单
      isSelectIdx: (state) => state.todoread.isAcive,
    }),
  },
  watch: {
  active: {
    immediate: true, // 立即执行一次
    handler(newVal) {
      this.gridCode = localStorage.getItem('$gridId')
      this.getList();
    }
  }
},
  mounted() {
    this.gridCode = localStorage.getItem('$gridId')
    this.getSourceList()
    this.getClassfityList()
    // this.pageNum=1
    // this.pageSize=10
    // this.onLoad()
    // this.getList()
  },
  methods: {
    // ...mapGetters(["isAcive"]),
    onClickLeft() {
      this.$router.push({
        path: '/publicline/index',
      })
      this.pageNum = 1
      this.pageSize = 10
    },
    async getSourceList() {
      const res = await sourceList({ id: store.getters.userInfo.username })
      const { result, success } = res
      if (success) {
        this.sourceList = result
      }
    },
    async getClassfityList() {
      this.loading = true
      this.finished = true
      const res = await classityList({ id: store.getters.userInfo.username })
      const { result, success } = res
      if (success) {
        this.loading = false
        this.classifyList = result
      }
    },
    onChangeSource() {
      this.showSource = true
    },
    onChangeClassify() {
      this.showClassify = true
    },
    onConfirmSource(value) {
      this.bsNumber = undefined
      this.CBOrderId = undefined
      this.value1 = value.label
      this.sourceId = value.value
      this.showSource = false
      this.pageNum=1
      this.pageSize=10
      this.doreadlists.length = 0
      this.getList()
      store.commit('SET_ISACTIVE', null)
      sessionStorage.removeItem('actives')
    },
    onConfirmClassify(value) {
      this.bsNumber = undefined
      this.CBOrderId = undefined
      this.value2 = value.label
      this.classifyId = value.value
      this.showClassify = false
      this.doreadlists.length = 0
      this.pageNum=1
      this.pageSize=10
      this.getList()
      store.commit('SET_ISACTIVE', null)
      sessionStorage.removeItem('actives')
    },

    async onLoad() {
      this.loading = true
      setTimeout(() => {
        this.pageNum += 1
        this.getList()
      }, 1000)
    },
    async getList(type) {
      let searchState = sessionStorage.getItem('actives')? sessionStorage.getItem('actives') : this.active
      this.gridCode = localStorage.getItem('$gridId')
      this.loadingSearch= true
      let params = {
        // userId:store.getters.userInfo.username,
        gridCode: this.gridCode,
        state: searchState,
        sourceSystem: this.sourceId,
        pendingTypeId: this.classifyId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      if(type){
        params.sign = '1'
        params.value = this.bsNumber
        params.CBOrderId = this.CBOrderId
      }
      this.loading = true
      const res = await doreadList({ ...params })
      const { result, success } = res
      if (success) {
        this.loading = false
        this.loadingSearch= false
        if (result) {
          // this.orderlists = result.list
          this.doreadlists.push(...res.result.list)
          this.loading = false
          this.finished = res.result.list.length < this.pageSize
        } else {
          this.doreadlists.length = 0
        }
      }else{
        this.loadingSearch= false
        this.loading = false
      }
    },
    toDetailOrder(items, idx) {
      store.commit('SET_ISACTIVE', idx)
      // sessionStorage.setItem('actives', this.active)
      sessionStorage.setItem('classifyType', items.pendingTypeId)
      // store.commit('SET_STATETYPE', this.active)
      // store.commit('SET_CLASSIFYTYPE', items.pendingTypeId)
      this.$router.push({
        // path: '/publicline/todoToread/detailOrder',
        name: 'todoToreadDetail',
        params: {
          id: items.id,
          state:items.state,
        },
      })
    },
    onSearch(){
      this.doreadlists.length = 0
      this.pageNum=1
      this.pageSize=10
      this.getList('search')
      store.commit('SET_ISACTIVE', null)
      sessionStorage.removeItem('actives')
    },
    onReset(){
      this.bsNumber = undefined
      this.CBOrderId = undefined
      this.value1 = '全部'
      this.value2 = '全部'
      this.sourceId= ''
      this.classifyId= ''
      this.doreadlists.length = 0
      this.pageNum=1
      this.pageSize=10
      this.getList('search')
      store.commit('SET_ISACTIVE', null)
      sessionStorage.removeItem('actives')
    }
  },
}
</script>
<style lang="less" scoped>
.acitve {
  color: #5972fa !important;
}
.todo_detail {
  // background: #fff;
  padding: 2px 0 8px 0;
  // margin-top: 40px;
  .selectContent {
    background: #fff;
    padding: 8px 10px 8px 10px;
    border-top: 1px solid #dddada;
    display: flex;
    align-items: center;
    margin-top: 88px;
    position: fixed;
    width: 100%;
    z-index: 9;
    height: 54px;
    div {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #666666;
      box-sizing: border-box;
    }
    .classify {
      // border: 1px solid #000;
      border-left: 1px solid #dddada;
      padding-left: 10px;
    }
    .system{
      span{
        margin-right: 8px;
        color: rgb(0, 0, 0);
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 48px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
  .searchContent{
    display: flex;
    align-items: center;
    margin-top: 136px;
    position: fixed;
    z-index: 9;
    width: 100%;
    background: #ffffff;
    .title{
      min-width: 72px;
      /* padding: 0 6px; */
      margin-left: 27px;
      font-size: 14px;
      color: #666666;
    }
  }
  .searchContent2{
    display: flex;
    align-items: center;
    margin-top: 178px;
    position: fixed;
    z-index: 9;
    width: 100%;
    background: #ffffff;
    .title{
      min-width: 96px;
      margin-left: 5px;
      font-size: 14px;
      color: #666666;
    }
  }
  .searchContent3{
    display: flex;
    align-items: center;
    margin-top: 220px;
    position: fixed;
    z-index: 9;
    width: 100%;
    background: #ffffff;
    justify-content: center;
    padding-bottom: 6px;
  }
  .content {
    // overflow-y: auto;
    // margin-top:186px;
    margin-bottom: 34px;
    .item_content {
      background-image: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
      border-radius: 4px;
      // background: #fff;
      margin: 10px 0;
      .title {
        display: flex;
        align-items: center;
        padding: 8px 10px;
        div {
          margin-left: 10px;
          font-size: 16px;
          color: #333333;
          letter-spacing: 0;
          font-family: PingFangSC-Medium;
          font-weight: 600;
        }
      }
      .staus_content {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-bottom: 10px;
        .status0 {
          padding: 0 4px;
          color: #6e79fd;
          border: 1px solid #6e79fd;
        }
        .status1 {
          padding: 0 4px;
          color: #41c2bf;
          border: 1px solid #41c2bf;
        }
        .status2 {
          padding: 0 4px;
          color: #3291ff;
          border: 1px solid #3291ff;
        }
        .time {
          color: #999999;
        }
      }
      .deatil_content {
        display: flex;
        // align-items: center;
        // justify-content: space-around;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(223, 237, 255, 0.6);
        .items {
          width: 33.33%;
          margin-left: 10px;
          .line_item {
            display: flex;
          }
          .m0 {
            // width: 70%;
            margin: 0 auto;
          }
          .line {
            border-left: 1px solid #dbecff; /* 分割线的样式，可以自定义颜色和宽度 */
            border-right: 1px solid #dbecff; /* 分割线的样式，可以自定义颜色和宽度 */
            // width: 1px; /* 分割线的长度 */
            height: 20px;
            // line-height: 44px;
            margin: 12px 0;
          }
        }
        .mr-4 {
          margin-right: 4px;
        }
        .label {
          display: flex;
          align-items: center;
          span {
            color: #666666;
          }
        }
        .value {
          margin-top: 2px;
          margin-left: 12px;
          padding-right:2px;
        }
      }
    }
  }
}
</style>
      